<template>
  <div class="pwd">
    <div class="pwd-content">
      <a-form
        :model="formState"
        name="form"
        class="pwd-form"
        labelAlign="left"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <div class="pwd-title">修改密码</div>
        <a-alert v-if="isPwdFailed" class="pwd-error" type="error" :message="pwdFailedMsg" banner closable />

        <a-form-item
          class="oldPassword"
          label=""
          name="oldPassword"
          :rules="[{ required: true, message: '请输入原始密码!' }]"
        >
          <a-input-password v-model:value.trim="formState.oldPassword" allowClear placeholder="请输入原始密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
          <!-- <a-popconfirm placement="rightTop" ok-text="Yes" cancel-text="No">
            <template #title>
              <p>123</p>
              <p>456</p>
            </template>
            <a-button>TL</a-button>
          </a-popconfirm> -->
        </a-form-item>
        <a-form-item
          class="pwd-username"
          label=""
          name="password"
          :rules="[{ required: true, validator: validatePass }]"
        >
          <a-input-password v-model:value.trim="formState.password" allowClear placeholder="请输入新密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
          class="pwd-password"
          label=""
          name="rePassword"
          :rules="[{ required: true, validator: validatePass2, trigger: 'blur' }]"
        >
          <a-input-password v-model:value.trim="formState.rePassword" allowClear placeholder="请输入确认密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button class="pwd-btn" type="primary" html-type="submit" :loading="loadingSubmit">确定修改</a-button>
        </a-form-item>
      </a-form>
      <pop-modal
        class="pwd-pop"
        :class="popChangePwdClass"
        :is-show="true"
        :desc="formState.password ? '请至少输入 6 个字符，必须包含数字和字母。' : '密码 3个月需强制修改'"
      >
        <template v-if="popChangePwdClass" #header>
          <div class="pop-header" :class="formState.password.length > 6 ? 'pop-header-long' : ''">
            强度：{{ formState.password.length > 6 ? '强' : '太短' }}
            <a-progress
              class="pop-persent"
              :stroke-color="formState.password.length > 6 ? '#52C41A' : '#F5222D'"
              :percent="(formState.password.length / 15) * 100"
              :show-info="false"
            />
          </div>
        </template>
      </pop-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { LockOutlined } from '@ant-design/icons-vue'
import { apiPasswordUpdate } from '@/api/index.js'
import PopModal from '@/components/PopModal.vue'
// import { setToken } from "@/utils/token.js";
import { useRouter } from 'vue-router'
import { Rule } from 'ant-design-vue/es/form'
const router = useRouter()
const isPwdFailed = ref(false)
const loadingSubmit = ref(false)
const pwdFailedMsg = ref('账户或密码错误')
interface FormState {
  oldPassword: string
  password: string
  rePassword: string
}
const formState = reactive<FormState>({
  oldPassword: '',
  password: '',
  rePassword: '',
})

const popChangePwdClass = computed(() => {
  if (formState.password) {
    return formState.password.length > 6 ? 'pwd-pop-strong' : 'pwd-pop-wealf'
  }
  return ''
})
const validatePass = async (_rule: Rule, value: string) => {
  debugger
  if (value === '') {
    return Promise.reject('请输入新密码')
  } else {
    const regex = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,}$/
    if (regex.test(value)) {
      return Promise.resolve()
    } else {
      return Promise.reject('请至少输入 6 个字符，必须包含数字和字母')
    }
  }
}
const validatePass2 = async (_rule: Rule, value: string) => {
  debugger
  if (value === '') {
    return Promise.reject('请输入确认密码')
  } else if (formState.password === '') {
    return Promise.reject('请先输入密码')
  } else {
    if (value === formState.password) {
      return Promise.resolve()
    } else {
      return Promise.reject('确认密码与密码不一致，请您核对后再次输入')
    }
  }
}
const onFinish = (values: any) => {
  isPwdFailed.value = false
  loadingSubmit.value = true
  // const obj = { p_username: 'admin', p_password: 'admin123!@#' }
  // axios
  //   .post('/api/commonsuite/pwd', obj, {
  //     headers: { 'content-type': 'application/x-www-form-urlencoded' },
  //   })
  apiPasswordUpdate(formState)
    .then((res: any) => {
      isPwdFailed.value = false
      loadingSubmit.value = false
      let code = res.code
      if (code == 'EP.A0123') {
        pwdFailedMsg.value = res.message || '密码3个月强制修改'
      } else if (code == 'EP.A0122') {
        pwdFailedMsg.value = res.message || '不满足密码复杂度密码要求的密码'
      } else if (code == 'EP.A0211') {
        isPwdFailed.value = true
        pwdFailedMsg.value = res.message || '用户3次登录失败，锁定10分钟'
      } else if (code == 'EP.A0120' || code == 'EP.A0110' || code == 'EP.A0220') {
        isPwdFailed.value = true
        pwdFailedMsg.value = res.message || '账户或密码错误'
      }
      // 处理结果
      if (res.data) {
        router.push('/')
      }
    })
    .catch((error: any) => {
      isPwdFailed.value = true
      loadingSubmit.value = false
      // 处理错误
      // router.push('/')
    })
}

const onFinishFailed = (errorInfo: any) => {
}
// const disabled = computed(() => {
//   return !(formState.username && formState.password)
// })
</script>
<style lang="less" scoped>
.pwd {
  display: flex;
  align-items: center;
  text-align: center;
  // background: red;
  height: 100%;
  .pwd-content {
    margin: 50px auto 0;
    display: flex;
    .pwd-title {
      height: 33px;
      font-size: 28px;
      font-family: MicrosoftYaHeiSemibold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 33px;
      text-align: center;
      margin-bottom: 50px;
    }
    .pwd-form {
      width: 350px;
      ::v-deep(.ant-form-item-explain-error) {
        text-align: left;
      }
    }
    .pwd-btn {
      margin-top: 2px;
      width: 100%;
      height: 40px;
      background: #be0028;
      border-radius: 2px;
    }
    .pwd-pop {
      margin: 70px 0 0 20px !important;
      .pop-header {
        color: #f5222d;
        font-weight: bold;
        line-height: 16px;
        .pop-persent {
          margin-top: -2px;
          width: 226px;
        }
      }
      .pop-header-long {
        color: #52c41a;
      }
    }
    .pwd-pop-strong {
      margin-top: 126px !important;
      .pop-title {
        color: #52c41a;
      }
    }
    .pwd-pop-wealf {
      margin-top: 126px !important;
    }
  }
}
</style>
